<template>
  <div class="knowledge-base-page">
    <div class="page-header">
      <h2>知识库</h2>
      <p>管理和维护企业知识资产</p>
    </div>
    
    <div class="content-container">
      <div class="knowledge-sections">
        <!-- 图数据库链接 -->
        <div class="knowledge-card graph-database-card">
          <div class="card-header">
            <div class="card-icon">
              <icon-database />
            </div>
            <div class="card-title">
              <h3>图数据库</h3>
              <p>Neo4j 图数据库管理界面</p>
            </div>
          </div>
          <div class="card-content">
            <p>访问 Neo4j 图数据库管理界面，查看和管理知识图谱数据</p>
            <div class="database-stats">
              <div class="stat-item">18个节点</div>
              <div class="stat-item">65个关系</div>
            </div>
            <div class="card-actions">
              <a-button 
                type="primary" 
                size="large"
                @click="openGraphDatabase"
                class="action-button"
              >
                <template #icon><icon-external-link /></template>
                打开图数据库
              </a-button>
              <a-button 
                type="outline" 
                size="large"
                @click="manageGraphDatabase"
                class="action-button manage-button"
              >
                <template #icon><icon-settings /></template>
                管理图数据库
              </a-button>
            </div>
          </div>
        </div>

        <!-- 向量数据库 -->
        <div class="knowledge-card vector-database-card">
          <div class="card-header">
            <div class="card-icon">
              <icon-vector />
            </div>
            <div class="card-title">
              <h3>向量数据库</h3>
              <p>高维向量数据存储与检索</p>
            </div>
          </div>
          <div class="card-content">
            <p>管理和查询高维向量数据，支持语义搜索和相似性匹配</p>
            <div class="vector-stats">
              <div class="stat-item">向量维度：1024</div>
              <div class="stat-item">知识切片：6160</div>
            </div>
            <div class="card-actions">
              <a-button 
                type="primary" 
                size="large"
                class="action-button"
                @click="openVectorDatabase"
              >
                <template #icon><icon-search /></template>
                打开向量数据库
              </a-button>
            </div>
          </div>
        </div>

        <!-- 文档库 -->
        <div class="knowledge-card document-library-card">
          <div class="card-header">
            <div class="card-icon">
              <icon-file />
            </div>
            <div class="card-title">
              <h3>文档库</h3>
              <p>企业文档管理与检索系统</p>
            </div>
          </div>
          <div class="card-content">
            <p>存储、管理和检索企业各类文档，支持全文搜索和智能分类</p>
            <div class="document-stats">
              <div class="stat-item">供应链文档：{{ documentStats.total }}份</div>
              <div class="stat-item">PPT：{{ documentStats.ppt }}份 | PDF：{{ documentStats.pdf }}份</div>
            </div>
            <div class="card-actions">
              <a-button 
                type="primary" 
                size="large"
                class="action-button"
                @click="openDocumentLibrary"
              >
                <template #icon><icon-folder /></template>
                打开文档库
              </a-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 文档库弹窗 -->
    <a-modal
      v-model:visible="documentModalVisible"
      title="图谱库语料文档"
      width="800px"
      :footer="false"
      @ok="documentModalVisible = false"
      @cancel="documentModalVisible = false"
    >
      <div class="document-browser">
        <div class="document-header">
          <div class="document-path">
            <icon-folder style="margin-right: 8px;" />
            <span>{{ documentPath }}</span>
          </div>
          <a-button size="small" @click="refreshDocuments">
            <template #icon><icon-refresh /></template>
            刷新
          </a-button>
        </div>
        
        <div class="document-list">
          <div v-if="documents.length === 0" class="empty-state">
            <icon-file-empty style="font-size: 48px; color: #ccc;" />
            <p>暂无文档</p>
          </div>
          <div 
            v-else 
            v-for="doc in documents" 
            :key="doc.name"
            class="document-item"
            @click="openDocument(doc)"
          >
            <div class="document-icon">
              <icon-file-pdf v-if="doc.type === 'pdf'" style="color: #ff4d4f;" />
              <icon-file-powerpoint v-else-if="doc.type === 'ppt'" style="color: #ff7a00;" />
              <icon-file-word v-else-if="doc.type === 'doc'" style="color: #1890ff;" />
              <icon-file-excel v-else-if="doc.type === 'excel'" style="color: #52c41a;" />
              <icon-file v-else style="color: #666;" />
            </div>
            <div class="document-info">
              <div class="document-name">{{ doc.name }}</div>
              <div class="document-details">
                <span>{{ doc.size }}</span>
                <span>{{ doc.modifiedTime }}</span>
              </div>
            </div>
            <div class="document-actions">
              <a-button size="small" type="text" @click.stop="downloadDocument(doc)">
                <template #icon><icon-download /></template>
                下载
              </a-button>
            </div>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Message, Modal } from '@arco-design/web-vue'

// 路由
const router = useRouter()

// 响应式数据
const documentModalVisible = ref(false)
const documentPath = ref('G:\\working_project\\New_Project\\public\\图谱库语料')
const documents = ref([])

// 文档统计数据
const documentStats = ref({
  total: 14,
  ppt: 6,
  pdf: 3,
  doc: 4,
  excel: 1
})

// 模拟文档数据（基于实际文件列表）
const mockDocuments = [
  { 
    name: '供应商质量问题数据包.xlsx', 
    type: 'excel', 
    size: '2.5MB', 
    modifiedTime: '2024-01-15',
    path: '/图谱库语料/供应商质量问题数据包.xlsx'
  },
  { 
    name: '供应链.doc', 
    type: 'doc', 
    size: '1.2MB', 
    modifiedTime: '2024-01-12',
    path: '/图谱库语料/供应链.doc'
  },
  { 
    name: '供应链.ppt', 
    type: 'ppt', 
    size: '5.8MB', 
    modifiedTime: '2024-01-10',
    path: '/图谱库语料/供应链.ppt'
  },
  { 
    name: '供应链与供应链管理.pptx', 
    type: 'ppt', 
    size: '8.2MB', 
    modifiedTime: '2024-01-08',
    path: '/图谱库语料/供应链与供应链管理.pptx'
  },
  { 
    name: '供应链基础业务流程知识学习资料.doc', 
    type: 'doc', 
    size: '3.1MB', 
    modifiedTime: '2024-01-05',
    path: '/图谱库语料/供应链基础业务流程知识学习资料.doc'
  },
  { 
    name: '供应链战略及供应链的构建.ppt', 
    type: 'ppt', 
    size: '6.5MB', 
    modifiedTime: '2024-01-03',
    path: '/图谱库语料/供应链战略及供应链的构建.ppt'
  },
  { 
    name: '供应链管理.doc', 
    type: 'doc', 
    size: '2.8MB', 
    modifiedTime: '2024-01-01',
    path: '/图谱库语料/供应链管理.doc'
  },
  { 
    name: '供应链管理.ppt', 
    type: 'ppt', 
    size: '7.2MB', 
    modifiedTime: '2023-12-28',
    path: '/图谱库语料/供应链管理.ppt'
  },
  { 
    name: '供应链管理基础知识.ppt', 
    type: 'ppt', 
    size: '4.9MB', 
    modifiedTime: '2023-12-25',
    path: '/图谱库语料/供应链管理基础知识.ppt'
  },
  { 
    name: '基于知识图谱的国内供应链管理研究分析.pdf', 
    type: 'pdf', 
    size: '3.5MB', 
    modifiedTime: '2023-12-20',
    path: '/图谱库语料/基于知识图谱的国内供应链管理研究分析.pdf'
  },
  { 
    name: '汽车零部件行业供应链质量管理与探讨——基于A公司在供应链质量管理的实践.pdf', 
    type: 'pdf', 
    size: '4.2MB', 
    modifiedTime: '2023-12-18',
    path: '/图谱库语料/汽车零部件行业供应链质量管理与探讨——基于A公司在供应链质量管理的实践.pdf'
  },
  { 
    name: '浅论供应链质量管理.doc', 
    type: 'doc', 
    size: '1.8MB', 
    modifiedTime: '2023-12-15',
    path: '/图谱库语料/浅论供应链质量管理.doc'
  },
  { 
    name: '知识共享-供应链动态能力与供应链绩效的关系研究.pdf', 
    type: 'pdf', 
    size: '3.8MB', 
    modifiedTime: '2023-12-12',
    path: '/图谱库语料/知识共享-供应链动态能力与供应链绩效的关系研究.pdf'
  },
  { 
    name: '第八章供应链质量管理.ppt', 
    type: 'ppt', 
    size: '5.5MB', 
    modifiedTime: '2023-12-10',
    path: '/图谱库语料/第八章供应链质量管理.ppt'
  }
]

// 知识库页面逻辑

// 打开图数据库
const openGraphDatabase = () => {
  try {
    // 在新窗口中打开图数据库链接
    window.open('http://localhost:7474/', '_blank')
    Message.success('正在打开图数据库管理界面')
  } catch (error) {
    console.error('打开图数据库失败:', error)
    Message.error('打开图数据库失败，请检查链接是否可用')
  }
}

// 管理图数据库
const manageGraphDatabase = () => {
  try {
    // 直接跳转到3D图数据库管理界面
    router.push('/graph-management')
  } catch (error) {
    console.error('打开图数据库管理失败:', error)
    Message.error('打开图数据库管理失败')
  }
}

// 打开向量数据库
const openVectorDatabase = () => {
  try {
    // 跳转到SQLite查看器页面
    window.location.href = '/sqlite-viewer'
    Message.success('正在打开向量数据库查看器')
  } catch (error) {
    console.error('打开向量数据库失败:', error)
    Message.error('打开向量数据库失败，请检查路径是否正确')
  }
}

// 打开文档库
const openDocumentLibrary = () => {
  try {
    // 显示文档库弹窗
    documentModalVisible.value = true
    loadDocuments()
    Message.success('正在加载文档库')
  } catch (error) {
    console.error('打开文档库失败:', error)
    Message.error('打开文档库失败，请检查路径是否正确')
  }
}

// 加载文档列表
const loadDocuments = () => {
  // 模拟加载过程
  setTimeout(() => {
    documents.value = mockDocuments
  }, 500)
}

// 刷新文档列表
const refreshDocuments = () => {
  Message.info('正在刷新文档列表...')
  documents.value = []
  loadDocuments()
}

// 打开文档
const openDocument = (doc) => {
  try {
    // 构建完整的文档路径
    const fullPath = `${window.location.origin}/public${doc.path}`
    window.open(fullPath, '_blank')
    Message.success(`正在打开文档: ${doc.name}`)
  } catch (error) {
    console.error('打开文档失败:', error)
    Message.error(`打开文档失败: ${doc.name}`)
  }
}

// 下载文档
const downloadDocument = (doc) => {
  try {
    // 创建下载链接
    const link = document.createElement('a')
    link.href = `/public${doc.path}`
    link.download = doc.name
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    Message.success(`正在下载文档: ${doc.name}`)
  } catch (error) {
    console.error('下载文档失败:', error)
    Message.error(`下载文档失败: ${doc.name}`)
  }
}

// 组件挂载时初始化
onMounted(() => {
  // 可以在这里进行初始化操作
})


</script>

<style scoped>
.knowledge-base-page {
  padding: 24px;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  color: #000000;
}

.page-header p {
  margin: 0;
  color: #666;
}

.content-container {
  background: white;
  padding: 24px;
  border-radius: 8px;
  min-height: 400px;
}

.knowledge-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 24px;
  margin-top: 20px;
}

.knowledge-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid #f0f0f0;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.knowledge-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.knowledge-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

.graph-database-card::before {
  background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
}

.management-card::before {
  background: linear-gradient(90deg, #43e97b 0%, #38f9d7 100%);
}

.vector-database-card::before {
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

.document-library-card::before {
  background: linear-gradient(90deg, #fa709a 0%, #fee140 100%);
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  gap: 16px;
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.graph-database-card .card-icon {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.management-card .card-icon {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.vector-database-card .card-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.document-library-card .card-icon {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.card-title h3 {
  margin: 0 0 4px 0;
  font-size: 20px;
  font-weight: 600;
  color: #1d2129;
}

.card-title p {
  margin: 0;
  color: #86909c;
  font-size: 14px;
}

.card-content p {
  margin: 0 0 20px 0;
  color: #4e5969;
  line-height: 1.6;
  font-size: 14px;
}

.database-stats {
  margin: 0 0 20px 0;
  background: rgba(24, 144, 255, 0.1);
  padding: 12px;
  border-radius: 6px;
  border-left: 3px solid #1890ff;
}

.database-stats .stat-item {
  color: #1890ff;
  font-weight: 500;
  font-size: 16px;
  padding: 4px 0;
  text-align: center;
}

.database-stats .stat-item:first-child {
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(24, 144, 255, 0.2);
  padding-bottom: 8px;
}

.document-stats {
  margin: 0 0 20px 0;
  background: rgba(250, 112, 154, 0.1);
  padding: 12px;
  border-radius: 6px;
  border-left: 3px solid #fa709a;
}

.document-stats .stat-item {
  color: #fa709a;
  font-weight: 500;
  font-size: 16px;
  padding: 4px 0;
  text-align: center;
}

.document-stats .stat-item:first-child {
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(250, 112, 154, 0.2);
  padding-bottom: 8px;
}

.vector-stats {
  margin: 0 0 20px 0;
  background: rgba(102, 126, 234, 0.1);
  padding: 12px;
  border-radius: 6px;
  border-left: 3px solid #667eea;
}

.vector-stats .stat-item {
  color: #667eea;
  font-weight: 500;
  font-size: 16px;
  padding: 4px 0;
  text-align: center;
}

.vector-stats .stat-item:first-child {
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(102, 126, 234, 0.2);
  padding-bottom: 8px;
}

.card-actions {
  display: flex;
  gap: 12px;
}

.action-button {
  flex: 1;
}

.manage-button {
  border: 1px solid #d9d9d9;
  color: #595959;
}

.manage-button:hover {
  border-color: #40a9ff;
  color: #40a9ff;
}

/* 文档浏览器样式 */
.document-browser {
  padding: 16px 0;
}

.document-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.document-path {
  display: flex;
  align-items: center;
  color: #666;
  font-size: 14px;
}

.document-list {
  max-height: 400px;
  overflow-y: auto;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #999;
}

.empty-state p {
  margin-top: 16px;
  font-size: 14px;
}

.document-item {
  display: flex;
  align-items: center;
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.document-item:hover {
  background-color: #f8f9fa;
  border-color: #d9d9d9;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.document-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-right: 12px;
}

.document-info {
  flex: 1;
  min-width: 0;
}

.document-name {
  font-weight: 500;
  color: #1d2129;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-details {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #86909c;
}

.document-actions {
  flex-shrink: 0;
  margin-left: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .knowledge-sections {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .knowledge-card {
    padding: 20px;
  }
  
  .card-header {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  
  .document-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .document-icon {
    margin-right: 0;
  }
  
  .document-details {
    flex-direction: column;
    gap: 4px;
  }
}
</style>
